<script setup lang="ts">
import { type PropType, ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import imgs from '@/assets/screenimg/bgscen.png'
const props = defineProps({
  data: {
    type: Object,
    default: () => []
  },
  withorhight: {
    type: Number,
    default: 140
  }
});
const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  renderer: "svg"
});
// console.log("工单所属",props);

var img = imgs
//颜色16进制换算rgba,添加透明度
function hexToRgba(hex, opacity) {
  return (
    'rgba(' +
    parseInt('0x' + hex.slice(1, 3)) +
    ',' +
    parseInt('0x' + hex.slice(3, 5)) +
    ',' +
    parseInt('0x' + hex.slice(5, 7)) +
    ',' +
    opacity +
    ')'
  );
}

const radius = ['60%', '64%'];
// 颜色系列
const color = [
  '#37FFC9', '#FFE777', '#19D6FF', '#32A1FF', '#cccccc', '#ff1111',

];

const labelshow = true;
const centerimg = true;
const lineshow = false;
const color1 = []
const color2 = []
const color3 = []
let colorMap = {}
function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return {
    color1: 'rgb(' + r + ',' + g + ',' + b + ')',
    color2: 'rgba(' + r + ',' + g + ',' + b + ',0.7' + ')',
  };
}

function getColorMap(index) {
  if (colorMap[index]) {
    return colorMap[index]
  } else {
    let color = randomColor()
    colorMap[index] = {
      color1: color.color1,
      color2: color.color2,
    }
    return colorMap[index]
  }
}
// 设置每层圆环颜色和添加间隔的透明色
color.forEach((item) => {
  color1.push(item, 'transparent');
  color2.push(hexToRgba(item, 0.7), 'transparent');
  // color3.push(hexToRgba(item, 0.4), 'transparent');
});
let data1 = [];
let sum = 0;

// 每层圆环大小
let radius2 = [Number(radius[1].split('%')[0]) + 0 + '%', Number(radius[1].split('%')[0]) + 4 + '%'];
let radius3 = [Number(radius[1].split('%')[0]) + 4 + '%', Number(radius[1].split('%')[0]) + 8 + '%'];

watch(() => props.data, () => {
  // 根据总值设置间隔值大小
  sum = 0
  data1 = []
  props.data.forEach((item) => {

    sum += Number(item.value);
  });
  // 给每个数据后添加特定的透明的数据形成间隔
  props.data.forEach((item, index) => {


    if (item.value !== 0) {
      data1.push(item, {
        name: '',
        value: sum / 80,
        // value: null,
        labelLine: {
          show: false,
          lineStyle: {
            color: 'transparent',
          },
        },
        itemStyle: {
          show: false,
          fontSize: 0,
          color: 'transparent',
        },
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        emphasis: {
          show: false
        }
      });
    }
  });
  setOptions({
    container: "#screen",
    title: {
      text: sum + "",
      // 副标题
      subtext: "总数",
      // 主副标题间距
      // itemGap: 8,

      x: "center",
      y: "center",
      // 主标题样式
      textStyle: {
        fontSize: "1rem",
        color: '#fff',
      },
      // 副标题样式
      subtextStyle: {
        fontSize: "1rem",
        color: '#fff',




      }
    },
    backgroundColor: '',
    graphic: {
      elements: [{
        type: "image",
        z: 3,
        style: {
          image: img,
          width: props.withorhight,
          height: props.withorhight
        },
        left: 'center',
        top: 'center',
      }]
    },
    grid: {
      top: '100px',
      height: '290px',
      bottom: 0,
      left: 0,
      right: 0,
      containLabel: true,
    },
    tooltip: {
      // formatter: (params) => {
      //     if (params.name !== '') {
      //         return params.name + ' : ' + params.value + '\n' + '(' + params.percent + '%)';
      //     }
      // },
    },
    series: [
      // 最外层圆环
      {
        type: 'pie',
        radius: radius3,
        center: ['50%', '50%'],
        hoverAnimation: false,
        startAngle: 90,
        selectedMode: 'single',
        selectedOffset: 0,
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '10%',
        itemStyle: {
          normal: {
            color: (params) => {
              // return color1[params.dataIndex];
              return getColorMap(params.dataIndex).color1;
            },
          },
        },
        label: {
          alignTo: 'edge',
          show: true,
          formatter: '{name|{b}}\n{time|{c} 个}',
          minMargin: 5,
          edgeDistance: 1,
          lineHeight: 15,
          fontSize: 10,
          color: '#ffffff',
          rich: {
            time: {
              fontSize: 10,
              color: '#ffffff'
            }
          }
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 0,
          // maxSurfaceAngle: 80

        },
        data: data1,
        z: 666,
      },
      {
        type: 'pie',
        radius: radius2,
        center: ['50%', '50%'],
        hoverAnimation: false,
        startAngle: 90,
        selectedMode: 'single',
        left: '10%',
        right: '10%',
        top: '10%',
        bottom: '10%',
        selectedOffset: 0,
        itemStyle: {
          normal: {
            color: (params) => {
              // return color2[params.dataIndex];
              return getColorMap(params.dataIndex).color2;
            },
          },
          fontSize: '100px',
        },
        label: {
          show: false,
          formatter: '{b}{c}',
          fontSize: 10,
          color: '#ffffff',
          rich: {
            time: {
              fontSize: 10,
              color: '#ffffff'
            }
          }
        },
        data: data1,
        z: 666,
      }
    ],
  });
})

// :style="{height: props.data[1]?.height2}"
</script>
<template>

  <div ref="chartRef" class="w-full h-full" />
</template>
